<template>
  <div class="contioner">
     <div class="contioner-text" v-for="(item,index) in optionsList" :key="index">
      <!-- 单选框 -->
       <div class="contioner-radio">
         <el-radio :value="radio" :label="item.code" @input="oninput">{{item.code}} :</el-radio>
       </div>
       <!-- 输入框 -->
       <div class="contioner-input">
        <el-input v-model="item.title" style="width: 240px;" @change="onchange"></el-input>
       </div>
       <!-- 上传按钮 -->
       <div class="contioner-upload">
         <el-upload
           class="avatar-uploader"
           action="https://jsonplaceholder.typicode.com/posts/"
           :show-file-list="false"
           :on-success="handleAvatarSuccess"
           :before-upload="beforeAvatarUpload">
           <img v-if="imageUrl" :src="item.img" class="avatar">
           <div class="avatar-uploader-icon">上传图片</div>
           <div class="contioner-upload-i">x</div>
         </el-upload>
       </div>
     </div>
     <!-- 禁止选择 -->
     <el-button type="danger" disabled size="small">+增加选项与答案</el-button>
  </div>
</template>

<script>
export default {
  props: ['options'],
  data () {
    return {
      // 单选框数据
      radio: '',
      imageUrl: '',
      optionsList: [
        { isRight: false, code: 'A', title: '', img: '' },
        { isRight: false, code: 'B', title: '', img: '' },
        { isRight: false, code: 'C', title: '', img: '' },
        { isRight: false, code: 'D', title: '', img: '' }
      ]
    }
  }, // ,
  // created () {
  //   this.setText()
  // }
  watch: {
    options (newVal, oldVal) {
      if (newVal) {
        const options = this.options.map(item => {
          const newArr = { ...item }
          newArr.isRight = item.isRight = Boolean(item.isRight)
          return newArr
        })
        this.optionsList = options
        this.setText()
      }
    }
  },

  methods: {
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 单选框数据
    oninput (e) {
      this.radio = e
      this.optionsList.forEach(item => {
        if (e === item.code) {
          item.isRight = true
        } else {
          item.isRight = false
        }
      })
      this.$emit('update:options', this.optionsList)
    },
    // 表单数据
    onchange () {
      this.$emit('update:options', this.optionsList)
    },
    // 修改选择框的数据
    setText () {
      this.optionsList.forEach(item => {
        if (item.isRight) {
          this.radio = item.code
        }
      })
    }
  }
}
</script>

<style lang="scss">
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    width: 100px;
    height: 60px;
    text-align: center;
    line-height: 60px;
  }

  .contioner {
    .contioner-text {
      display: flex;
      align-items: center;
      .contioner-radio {
      display: inline-block;
    }
     .contioner-input {
      display: inline-block;
      margin: 0px 5px 0px 7px;
    }
     .contioner-upload {
      display: inline-block;
      position: relative;
      .contioner-upload-i {
        position: absolute;
        text-align: center;
        line-height: 15px;
        top: -9px;
        right: -9px;
        width: 18px;
        height: 18px;
        border: 1px solid #999;
        border-radius: 50%;
        color: #999;
      }
    }
    }

  }
</style>
